<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/default-2.0.0.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.css" />
    <link type="text/css" rel="stylesheet" class="edit_source" lang="stylesheet" href="../theme/default/editor.css" />
    <script type="text/javascript" src="../javascript/bui-2.0.0.js"></script>
    <script type="text/javascript" src="../lib/vue.min.js"></script>
    <script type="text/javascript" src="lang_config.js"></script>

</head>

<body>
    <div style="width: auto;margin:0px auto;padding-top: 20px;padding-left: 50px;;background-color: beige;" class="k_box_size">
        <!-- 页面属性 -->
        <div id="k_paper_form" class="k_flex_form">
            <div class="k_flex_form_row">
                <div class="k_flex_form_col">
                    <div class="k_flow_form_item">
                        <label>纸张大小:</label>
                        <span>
                            <select id="pageType" name="pageType">
                                <option selected="selected" value="794*1123">A4(竖版)</option>
                                <option value="1123*794">A4(横版)</option>
                                <option value="1123*1587">A3(竖版)</option>
                                <option value="1587*1123">A3(横版)</option>
                                <option value="">自定义</option>
                            </select>
                        </span>
                    </div>
                    <div class="k_flow_form_item">
                        <label>宽:</label> <span><input id="pageWidth" name="pageWidth"
                            class="k_prp_f_input" value="794" type="text"></span>
                    </div>
                    <div  class="k_flow_form_item">
                            <label>高:</label> <span><input id="pageHeight" name="pageHeight"
                                class="k_prp_f_input" value="794" type="text"></span>
                    </div>                    
                </div>   
            </div>
            <div class="k_flex_form_row">
                <div class="k_flex_form_col">
                    <div class="k_flow_form_item">
                        <label>上边距:</label> <span><input id="paddingTop" name="paddingTop"
                            value="100" type="text" class="k_prp_f_input"></span>
                    </div>
                    <div class="k_flow_form_item">
                        <label>下边距:</label> <span><input id="paddingBottom" name="paddingBottom"
                            value="100" type="text" class="k_prp_f_input"></span>
                    </div>
                </div>    
            </div>
            <div class="k_flex_form_row">
                <div class="k_flex_form_col">
                    <div class="k_flow_form_item">
                        <label>右边距:</label> <span><input id="paddingRight" name="paddingRight"
                            value="120" type="text" class="k_prp_f_input"></span>
                    </div>
                    <div class="k_flow_form_item">
                        <label>左边距:</label> <span><input id="paddingLeft" name="paddingLeft"
                            value="120" type="text" class="k_prp_f_input"></span>
                    </div>
                </div>    
            </div>
            <div class="k_flex_form_row">
                <div class="k_flex_form_col">
                    <div class="k_flow_form_item">
                        <label>页眉/页脚:</label>
                        <span class="k_prp_block_btn" id="editing_top" tip_lbl="编辑页眉">
                            <i class="fa fa-doc"></i>
                            <span style="top:6px;left:0" class="k_prp_page_h_b"></span>
                        </span>
                        <span class="k_prp_block_btn" id="editing_bottom" tip_lbl="编辑页脚">
                            <i class="fa fa-doc"></i>
                            <span style="bottom: 4px; left:2px;width:16px;" class="k_prp_page_h_b"></span>
                        </span>
                    </div>
                </div>
            </div>           
        </div>

        <!--段落属性 -->
        <div id="k_graph_form" class="k_flex_form">
            <div class="k_flex_form_row">
                <div class="k_flex_form_col">
                    <div class="k_flow_form_item">
                        <label>缩进:</label> <span><input id="indent" name="indent" value="120" type="text"  class="k_prp_f_input"></span>
                    </div>
                    <div class="k_flow_form_item">
                        <label style='display:inline-block;width:34px;'>行高:</label>                     
                    </div>
                     <div class="k_flow_form_item">
                        <span>
                            <select id="plineHeightOpt">
                                <option name="line-height" value="1.5">单倍</option>
                                <option name="line-height" value="1.8">1.5倍</option>
                                <option name="line-height" value="2">双倍</option>
                                <option name="line-height" value="2.5">高倍</option>
                                <option value="">自定义</option>
                            </select>
                        </span>
                        <span><input id="plineHeight" name="plineHeight" value="" type="text" class="k_prp_f_input"></span>
                    </div>
                </div>
            </div>
            <div class="k_flex_form_row">
                <div class="k_flex_form_col">
                    <div class="k_flow_form_item">
                        <label  style='display:inline-block;width:34px;'>边距:</label>
                    </div>
                    <div class="k_flow_form_item"><label>上</label><span><input id="ppadingTop" type="text" value="0" class="k_prp_f_input k_prp_w_5"/></span></div>
                    <div class="k_flow_form_item"><label>下</label><span><input id="ppadingBottom" type="text"  value="0" class="k_prp_f_input k_prp_w_5"/></span></div>
                   
                </div>
                <div class="k_flex_form_col">                   
                    <div class="k_flow_form_item"><label>左</label><span><input id="ppadingLeft" type="text"  value="0" class="k_prp_f_input k_prp_w_5"/></span></div>
                    <div class="k_flow_form_item"><label>右</label><span><input id="ppadingRight" type="text"  value="0" class="k_prp_f_input k_prp_w_5"/></span></div>
                </div>
            </div>
            <div class="k_flex_form_row">
                <div class="k_flex_form_col">
                    <div class="k_flow_form_item">
                        <label  style='display:inline-block;width:63px;'>边框类型:</label>
                    </div>
                    <div class="k_flow_form_item">
                        <span>
                            <select id="pborderStyle" style="width:60px;"><option selected="selected" value="solid">实线</option><option value="dotted">点状线</option><option value="dashed">长点状线</option></select>
                        </span>
                    </div>
                    <div class="k_flex_form_col">
                        <div class="k_flow_form_item">
                            <label  style='display:inline-block;width:63px;'>边框大小:</label>
                        </div>
                        <div class="k_flow_form_item">
                            <input id="pborderSize" style="width: 60px;" value="0" placeholder="0" type="text" class="k_prp_f_input"/>
                        </div>                   
                    </div>
                </div>
            </div>
            <div class="k_flex_form_row">
                <div class="k_flex_form_col">
                    <div class="k_flow_form_item">
                        <label  style='display:inline-block;width:63px;'>边框位置:</label>
                    </div>
                    <div id="graph_border_wap"  class="k_flow_form_item">
                        <span style="padding-top:5px;display:inline-block;">
                            <span class="_border_pos" v="left" tip_lbl="左边框" style="border-width: 1px 1px 1px 2px; border-style: dashed dashed dashed solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(0, 0, 255); border-image: initial; cursor: pointer; display: inline-block; width: 15px; height: 15px; margin-right: 8px; background-color: transparent;"></span>
                            <span class="_border_pos" v="top" tip_lbl="上边框" style="border-width: 2px 1px 1px; border-style: solid dashed dashed; border-color: rgb(0, 0, 255) rgb(204, 204, 204) rgb(204, 204, 204); border-image: initial; cursor: pointer; display: inline-block; width: 15px; height: 15px; margin-right: 8px; background-color: transparent;"></span>
                            <span class="_border_pos" v="right"  tip_lbl="右边框"  style="border-width: 1px 2px 1px 1px; border-style: dashed solid dashed dashed; border-color: rgb(204, 204, 204) rgb(0, 0, 255) rgb(204, 204, 204) rgb(204, 204, 204); border-image: initial; cursor: pointer; display: inline-block; width: 15px; height: 15px; margin-right: 8px; background-color: transparent;"></span>
                            <span class="_border_pos" v="bottom"  tip_lbl="下边框"  style="border-width: 1px 1px 2px; border-style: dashed dashed solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(0, 0, 255); border-image: initial; cursor: pointer; display: inline-block; width: 15px; height: 15px; margin-right: 8px; background-color: transparent;"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="k_flex_form_row">
                <div class="k_flex_form_col">
                    <div class="k_flow_form_item">
                        <label  style='display:inline-block;width:63px;'>颜色:</label>
                    </div>
                    <div  id="graph_colors"  class="k_flow_form_item">
                       <span tip_lbl="边框颜色" class="k_graphcolor k_box_size grh_border_color"><i class="fa fa-brush"></i></span>
                       <span tip_lbl="背景颜色" class="k_graphcolor k_box_size grh_bg_color"><i class="fa fa-pencil-1"></i></span>
                       <span tip_lbl="字体颜色" class="k_graphcolor k_box_size grh_font_color"><i class="fa fa-font-1"></i></span>
                    </div>            
                </div>
            </div>
        </div>


    </div>

    <div id="retjson" style='padding:20px 50px'></div>
    <script type="text/javascript">
        var retBean;

        $B.DomUtils.onDomLoaded(function () {
            var $retJSONeL = document.getElementById("retjson");
            var bean = {};
            retBean = $B.vueForm(
                "k_paper_form",
                bean,
                {
                    pborderSize:{
                        ctl:'NUMInputCtl',
                        opts:{   
                            min:0,
                            max:200,           
                            step:1
                        }
                    }
                },
                {
                    verifyOnChange: true,
                    verify: { //定义验证字段 ，字符串，数组，对象 
                        pageWidth: ['require', { rule: "range", min: 300, max: 5000 }],
                        pageHeight: ['require', { rule: "range", min: 300, max: 8000 }],
                        paddingTop: ['require', { rule: "range", min: 0, max: 300 }],
                        paddingBottom: ['require', { rule: "range", min: 0, max: 300 }],
                        paddingRight: ['require', { rule: "range", min: 0, max: 300 }],
                        paddingLeft: ['require', { rule: "range", min: 0, max: 300 }],
                        txt0001: ['require', { rule: "range", min: 0, max: 300 }],
                        txt0002: ['require', { rule: "range", min: 0, max: 300 }],
                        txt0003: ['require', { rule: "range", min: 0, max: 300 }]
                    },
                    onUpateFn: () => {
                        console.log("UI发生了更新");
                    },
                    onChange: (name, newVal, oldVal) => {
                        console.log(name + " 属性值变化,newVal=" + newVal + " oldVal=" + oldVal);
                        $retJSONeL.innerText = retBean.toJSONStr();

                    }
                });
            console.log(retBean.toJSON());
            console.log(retBean.toJSONStr());
            console.log(retBean.toJSONStr(true));
            //测试验证开关控件
            // $B.switchCtl("userStatus",{
            //     trueText:"在职",
            //     falseText:"离职",                  
            //     onChange:(id,value,oldVal)=>{
            //         console.log(id,value,oldVal);
            //     }
            // });
        });

        function saveFn() {
            if (retBean.toVerify()) {
                console.log(retBean.toJSON());
                console.log(retBean.toJSONStr());
                console.log(retBean.toJSONStr(true));
                $B.success("保存成功！", 1.5);
            } else {
                $B.error("数据验证没有通过！", 1.5);
            }
        }


    </script>
</body>

</html>